<template>
    <div class="app-container">
        <div class="top-box clearfix">
            <div class="top-left clearfix">
                <el-input placeholder="用户名/姓名模糊搜索" v-model="queryParams.keyWord"></el-input>
                <el-select  placeholder="角色" v-model="queryParams.role">
                    <el-option value="-1" label="所有角色"></el-option>
                    <el-option v-for="(k,v) in rolesMap" :label="k" :value="v" :key="v"></el-option>
                </el-select>
                <el-select  placeholder="用户类型" v-model="queryParams.type">
                    <el-option value="-1" label="所有类型" ></el-option>
                    <el-option v-for="(k,v) in userTypeMap" :label="k" :value="v" :key="v"></el-option>
                </el-select>
                <el-select  placeholder="用户状态" v-model="queryParams.status">
                    <el-option value="-1" label="所有状态"></el-option>
                    <el-option v-for="(k,v) in userStatusMap" :label="k" :value="v" :key="v"></el-option>
                </el-select>
            </div>
            <div class="top-right clearfix">
                <el-button type="primary" @click="toAdd()">添加用户</el-button>
                <el-button type="success" @click="queryUser()">查询</el-button>
            </div>
        </div>

        <div class="table-box">
            <table class="z-table" style="width: 100%">
                <thead>
                <tr>
                    <th>用户名</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>状态</th>
                    <th>类型</th>
                    <th>角色</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="u in users" :key="u.username">
                    <td>{{u.username}}</td>
                    <td>{{u.name}}</td>
                    <td>{{u.gender | genderFilter}}</td>
                    <td>{{u.status | statusFilter}}</td>
                    <td>{{u.type | typeFilter}}</td>
                    <td>
                        <span v-for="r in u.roleIdList" :key="r">{{rolesMap[r.toString()]}} </span>
                    </td>
                    <td>
                        <a class="z-label" @click="toEdit(u.username)">编辑</a>
                        <a class="z-label danger" @click="remove(u.username)">删除</a>
                    </td>
                </tr>
                <tr v-if="users.length == 0">
                    <td class="null-tr" colspan="6">空</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="pagination-box">
            <el-pagination
                class="pagination"
                @size-change="queryUser"
                @current-change="queryUser"
                :current-page="queryParams.pageCount"
                :page-sizes="[10, 20, 30, 50,80]"
                :page-size="queryParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryParams.total">
            </el-pagination>

        </div>
    </div>
</template>

<script>
    import '@/styles/form-box.css'
    import roleApi from '../../api/role'
    import userApi from '../../api/user'
    import global from '../../utils/global'
    import {Message, MessageBox} from 'element-ui'

    export default {
        name: "user-manager",
        data:function () {
            return {
                users:{},
                rolesMap:{},
                userStatusMap:global.userStatusMap,
                userTypeMap:global.userTypeMap,
                userGenderMap:global.userGenderMap,
                queryParams:{
                    role:'-1',
                    status:'-1',
                    type:'-1',
                    keyWord:'',
                    total:0,
                    pageSize:10,
                    pageCount:1,
                }
            }
        },
        methods:{
            queryUser:function () {
                console.log('query user')
                const _this = this;
                userApi.findUserByParams(_this.queryParams)
                    .then(function (data) {
                        _this.users = data.items
                        _this.queryParams.total = data.total
                    }).catch(function () {
                        Message.error('加载用户列表失败')
                    })
            },
            toAdd:function () {
                this.$router.push({
                    path:'/security/user-manager-add'
                })
            },
            remove:function (username) {
                const _this = this;
                userApi.removeByUsername(username)
                    .then(function (data) {
                        if (data.success){
                            Message.success('刪除成功')
                            _this.queryUser()
                        }else{
                            Message.error('刪除失敗')
                        }
                    }).catch(function () {
                        Message.error('刪除失敗')
                    })
            },
            toEdit:function(username){
                this.$router.push('/security/user-manager-edit/'+username)
            }
        },
        filters:{
            typeFilter:function (typeId) {
                return global.userTypeMap[typeId.toString()]
            },
            statusFilter:function (statusId) {
                return global.userStatusMap[statusId.toString()]
            },
            genderFilter:function (genderId) {
                return global.userGenderMap[genderId]
            }

        },
        mounted:function () {
            var _this = this;
            //加载roles
            roleApi.findAll()
                .then(function (data) {
                    data.forEach(function (role) {
                        _this.$set(_this.rolesMap,role.id.toString(),role.name)
                    })
                }).catch(function () {
                    Message.error('加载角色信息错误')
                })

            _this.queryUser()
        }
    }
</script>

<style scoped>



</style>
